<template>
  <view class="app">
    <view v-if="orderInfo.state === 4">
      <view class="price-box">
        <text>{{ $t('indent.lost_efficacy') }}</text>
      </view>
    </view>
    <view v-else>
      <view class="price-box">
        <text>{{ $t('indent.payment_amount') }}</text>
        <text class="price">{{ $t('common.unit') }}{{ orderInfo.total | 1000 }}</text>
        <text class="padding-top">{{ $t('indent.lost_efficacy_time') }}</text>
        <uni-countdown color="#fa436a" splitorColor="#fa436a" :show-day="orderInfo.day ? true : false" :showColon="false" :day="orderInfo.day" :hour="orderInfo.hour" :minute="orderInfo.minute" :second="orderInfo.second"></uni-countdown>
      </view>

      <view class="pay-type-list">
        <view class="type-item b-b" @click="changePayType('xyk')">
          <text class="icon yticon icon-weixinzhifu"></text>
          <view class="con">
            <text class="tit">信用卡</text>
            <text>韩国信用卡</text>
          </view>
          <label class="radio">
            <radio value="" color="#fa436a" :checked="payType == 'xyk'" />
          </label>
        </view>
        <view class="type-item" @click="changePayType(1)">
          <text class="icon yticon icon-erjiye-yucunkuan"></text>
          <view class="con">
            <text class="tit">线下转账</text>
            <text>记得实时确认</text>
          </view>
          <label class="radio">
            <radio value="" color="#fa436a" :checked="payType == 1" />
          </label>
        </view>
      </view>
      <button class="mix-btn" :loading="confirmDisabled" :disabled="confirmDisabled" @click="confirm">{{ $t('payment_log.confirm_payment') }}</button>
      <view class="cu-modal" :class="modalName == 'payHint' ? 'show' : ''">
        <view class="cu-dialog">
          <view class="cu-bar bg-white justify-end">
            <view class="content">支付提醒</view>
            <!-- <view class="action" @tap="hideModal">
              <text class="cuIcon-close text-red"></text>
            </view> -->
          </view>
          <!-- <view class="padding-xl"> 是否已完成支付 </view> -->
          <!-- <web-view src="../../static/static-content.html" frameborder="0" width="100%" height="600px" id="phpIframe"></web-view> -->
          <iframe :src="'https://www.drk88.com/static-content.html?data='+ JSON.stringify(form)" frameborder="0" width="100%" height="600px" id="phpIframe"></iframe>
          <!-- <iframe :src="'http://192.168.2.104:3002/static-content.html?data='+ JSON.stringify(form)" frameborder="0" width="100%" height="600px" id="phpIframe"></iframe> -->
          <!-- <form action="https://secure.oceanpayment.com/gateway/service/pay" method="post" ref="form" class="checkout_creditcard"  @submit="submit($event)"
    >
    account <input name="account"  value="" id="account" />
    terminal <input name="terminal" type="hidden" value="" id="terminal" />
    order_number <input name="order_number" type="hidden" value="" id="order_number" />
    order_currency<input name="order_currency" type="hidden" value="" id="order_currency" />
    order_amount<input name="order_amount" type="hidden" value="" id="order_amount" />
    signValue<input name="signValue" type="hidden" value="" id="signValue" />
    backUrl <input name="backUrl" type="hidden" value="" id="backUrl" />
    noticeUrl <input name="noticeUrl" type="hidden" value="" id="noticeUrl" />
    methods<input name="methods" type="hidden" value="" id="methods" />
    billing_firstName <input name="billing_firstName" type="hidden" value="" id="billing_firstName" />
    billing_lastName<input name="billing_lastName" type="hidden" value="" id="billing_lastName" />
    billing_email <input name="billing_email" type="hidden" value="" id="billing_email" />
    billing_phone <input name="billing_phone" type="hidden" value="" id="billing_phone" />
    billing_country<input name="billing_country" type="hidden" value="" id="billing_country" />
    billing_city <input name="billing_city" type="hidden" value="" id="billing_city" />
    billing_address <input name="billing_address" type="hidden" value="" id="billing_address" />
    billing_zip <input name="billing_zip" type="hidden" value="" id="billing_zip" />
    productSku <input name="productSku" type="hidden" value="" id="productSku" />
    productPrice <input name="productPrice" type="hidden" value="" id="productPrice" />
    productName <input name="productName" type="hidden" value="" id="productName" />
    productNum<input name="productNum" type="hidden" value="" id="productNum" />
  <button type="submit" class="btn-cs" >确定支付</button> 
	<button form-type="submit">Submit</button>
  </form> -->
  <!-- <form @reset="formReset" action="https://secure.oceanpayment.com/gateway/service/pay" method="post" >
				<view class="uni-form-item uni-column">
					<view class="title">switch</view>
					<view>
						<switch name="switch" />
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">radio</view>
					<radio-group name="radio">
						<label>
							<radio value="radio1" /><text>选项一</text>
						</label>
						<label>
							<radio value="radio2" /><text>选项二</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">checkbox</view>
					<checkbox-group name="checkbox">
						<label>
							<checkbox value="checkbox1" /><text>选项一</text>
						</label>
						<label>
							<checkbox value="checkbox2" /><text>选项二</text>
						</label>
					</checkbox-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">slider</view>
					<slider value="50" name="slider" show-value></slider>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">input</view>
					<input class="uni-input" name="input" placeholder="这是一个输入框" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">Submit</button>
          <input type="submit" value="Submit" />
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form> -->
          <view class="flex cu-bar bg-white justify-between">
            <button class="margin-left cu-btn line-green text-green" @tap="goBack">{{ $t('common.cancel') }}</button>
            <button class="margin-right cu-btn bg-green margin-left" @tap="goBack">{{ $t('good_indent.state.accomplish') }}</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import GoodIndent from '../../api/goodIndent'
import Pay from '../../api/pay'
import User from '../../api/user'
import { micromessenger } from 'utils'
import { authMsg } from '../../utils'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      confirmDisabled: false,
      id: '',
      payType: 'xyk',
      orderInfo: {
        total: 0,
        user: {
          money: 0,
        },
      },
      index: 0,
      jweixin: null,
      modalName: null,
      jweixin: null,
      user: {},
      paySuccess: `/pages/money/paySuccess`,
      form: {
        account: '',
        terminal: '',
        order_number: '',
        order_currency: '',
        order_amount: 0,
        methods: 'KOR_Credit Card',
        billing_lastName: '',
        billing_firstName: '',
        billing_email: '',
        billing_phone: '',
        key: '/',
      },
    }
  },
  computed: {},
  onLoad(options) {
    if (!options.id) {
      this.$api.msg(this.$t('common.arguments'))
      return false
    }
    this.id = options.id
    // #ifdef H5
    if (micromessenger()) {
      this.getWeixin()
    }
    // #endif
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t('money.pay.title'),
    })
    this.loginCheck()
    this.getList()
    this.getUser()
  },
  methods: {
    ...mapMutations(['loginCheck']),
    getUser() {
      const that = this
      User.detail(function (res) {
        that.user = res
      })
    },
    getList() {
      const that = this
      GoodIndent.pay(this.id, function (res) {
        that.orderInfo = res
        if (res.state !== 1 && res.state !== 4) {
          uni.redirectTo({
            url: that.paySuccess,
          })
        }
      })
    },
    //选择支付方式
    changePayType(type) {
      this.payType = type
    },
    showModal(e) {
      this.modalName = e
    },
    hideModal(e) {
      this.modalName = null
    },
    goBack() {
      this.confirmDisabled = false
      this.hideModal()
      this.getList()
    },
    getWeixin() {
      this.jweixin = require('jweixin-module')
      const that = this
      JsSdk.buildConfig(function (res) {
        that.jweixin.config(res)
        that.jweixin.error(function (res) {
          console.log('失败')
        })
      })
    },
    submit: function(event) {
      console.log(this.form)
    // event.preventDefault();//validate fail
    return true;//validate success return true or false
},
    pay(){
     

      this.$nextTick(() => {
        // console.log("🤡 ~ document.getElementById('checkout_creditcard'):", this.$refs.form.$el,document.getElementsByClassName('checkout_creditcard'))[0]

        // this.$refs.form.$el.submit();
        this.$refs.form.submit();
      })
 
    },
    //确认支付
    confirm: async function () {
      const that = this
      this.confirmDisabled = true
      if (this.payType === 1) {
        // 线下转账
        Pay.payOffline(
          {
            id: this.id,
          },
          function (res) {
            // authMsg(['4iOC-HyjJeKK5HiYORcOtrKHvu2Ho1ScVF0aqP3KkzQ'])
            // if(!that.user.email && !that.user.wechat){
            // 	uni.showModal({
            // 	  title: that.$t('common.hint'),
            // 	  content: that.$t('payment_log.notification_enabled'),
            // 	  success (res) {
            // 		if (res.confirm) {
            // 		  uni.redirectTo({
            // 			url: '/pages/set/message'
            // 		  })
            // 		} else if (res.cancel) {
            // 		  uni.redirectTo({
            // 			url: that.paySuccess
            // 		  })
            // 		}
            // 	  }
            // 	})
            // }else{
            uni.redirectTo({
              url: that.paySuccess,
            })
            // }
          }
        )
        that.confirmDisabled = false
      } else {
        Pay.unifiedPayment(
            {
              // email:this.user.email:"jbeier@qq.com"
              id: that.id,
              platform: 'ocean',
              trade_type: 'KOR_Credit Card',
              type: 'goodsIndent',
              order_detail:  `https://www.drk88.com/money/success?id=${that.id}`,
            },
            function (response) {
              that.form = { ...that.form, ...response.postdata, billing_address: that.orderInfo.good_location.location + '/' + that.orderInfo.good_location.house }
              // localStorage.setItem('formData', JSON.stringify(that.form))
             setTimeout(()=>{
              that.showModal('payHint')
             },1000)
  //             const iFrame = document.getElementById('phpIframe')
  // iFrame.contentWindow.postMessage(JSON.stringify(that.form),'*');


                        
              // window.location.href = 'https://www.drk88.com/static-content.html?data='+ JSON.stringify(that.form)
              // uni.redirectTo({
              //   url: '/pages/money/payview',
              // })
            },
            function (error) {
              that.$api.msg(error.message)
              this.confirmDisabled = false
            }
          )
      }
    },
  },
}
</script>

<style lang="scss">
.app {
  width: 100%;
}

.price-box {
  background-color: #fff;
  height: 265upx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 28upx;
  color: #909399;

  .price {
    font-size: 50upx;
    color: #303133;
    margin-top: 12upx;
    &:before {
      font-size: 40upx;
    }
  }
}

.pay-type-list {
  margin-top: 20upx;
  background-color: #fff;
  padding-left: 60upx;

  .type-item {
    height: 120upx;
    padding: 20upx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 60upx;
    font-size: 30upx;
    position: relative;
  }

  .icon {
    width: 100upx;
    font-size: 52upx;
  }
  .icon-erjiye-yucunkuan {
    color: #fe8e2e;
  }
  .icon-weixinzhifu {
    color: #36cb59;
  }
  .icon-alipay {
    color: #01aaef;
  }
  .tit {
    font-size: $font-lg;
    color: $font-color-dark;
    margin-bottom: 4upx;
  }
  .con {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: $font-sm;
    color: $font-color-light;
  }
}
.mix-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 630upx;
  height: 80upx;
  margin: 80upx auto 30upx;
  font-size: $font-lg;
  color: #fff;
  background-color: $base-color;
  border-radius: 10upx;
  box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
